<template>
  <div class="chart-container">
    <h3>商品数量排行</h3>
    <v-chart class="chart" :option="chartOption" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import type { XiangQing } from '../types';

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

interface Props {
  data: XiangQing[];
}

const props = defineProps<Props>();

const chartOption = computed(() => {
  // 按商品名称统计总数量和总金额
  const productStats = props.data.reduce((acc, item) => {
    const name = item.productName || '未知商品';
    if (!acc[name]) {
      acc[name] = {
        totalQuantity: 0,
        totalAmount: 0
      };
    }
    acc[name].totalQuantity += item.num || 0;
    acc[name].totalAmount += item.jinPrice || 0;
    return acc;
  }, {} as Record<string, { totalQuantity: number; totalAmount: number }>);

  // 转换为数组并排序
  const chartData = Object.entries(productStats)
    .map(([name, stats]) => ({
      name,
      quantity: stats.totalQuantity,
      amount: stats.totalAmount
    }))
    .sort((a, b) => b.quantity - a.quantity)
    .slice(0, 10); // 取前10名

  return {
    title: {
      text: '商品数量排行',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params: any) {
        const data = params[0];
        return `${data.name}<br/>
                数量: ${data.value}<br/>
                金额: ¥${chartData[data.dataIndex]?.amount || 0}`;
      }
    },
    legend: {
      data: ['数量'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: chartData.map(item => item.name),
      axisLabel: {
        color: '#fff',
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        data: chartData.map(item => item.quantity),
        itemStyle: {
          color: function(params: any) {
            // 渐变色
            const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'];
            return colors[params.dataIndex % colors.length];
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
});
</script>

<style scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  height: 400px;
}

.chart-container h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #fff;
}

.chart {
  height: 320px;
}
</style> 